<template>
  <!-- 近6个月出租率走势 -->
  <div class="lease-rate-trend chart-box2">
    <div class="chart-title">近6个月出租率走势</div>
    <div class="chart-content">
      <div class="chart-container" :id="chartId"></div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  onBeforeUnmount,
  nextTick,
  toRaw,
  watch,
} from "vue";
import { Chart, registerTheme } from "@antv/g2";
import DataSet from "@antv/data-set";
import common from "../../utils/common";
import store from "../../../../store";

export default defineComponent({
  name: "LeaseRateTrend",
  components: {},
  setup() {
    const state = reactive({
      chartId: "leaseRateTrendChart",
      chart: null,
      data: [],
    });

    const initChart = () => {
      const data = state.data;
      const ds = new DataSet();
      const dv = ds.createView().source(data);
      dv.transform({
        type: "map",
        callback: (row) => {
          const date = row.date.split("/")[1];
          row.date = parseInt(date, 10);
          return row;
        },
      }).transform({
        type: "regression",
        method: "polynomial",
        fields: ["date", "total"],
        bandwidth: 0.1,
        as: ["Month", "Value"],
      });

      state.chart = new Chart({
        container: state.chartId,
        autoFit: true,
        theme: "chartTheme",
      });

      state.chart.scale({
        Month: {
          range: [0, 1],
        },
        total: {
          alias: "出租率",
          sync: true,
          nice: true,
          formatter: (val) => {
            val = (val * 100).toFixed(0) + "%";
            return val;
          },
        },
        Value: {
          sync: true,
          nice: true,
        },
      });

      const view1 = state.chart.createView();
      view1.data(data);
      view1.interval().position("date*total").style({
        fillOpacity: 1,
      });

      const view2 = state.chart.createView();
      view2.axis(false);
      view2.data(dv.rows);
      view2
        .line()
        .position("Month*Value")
        .style({
          stroke: common.theme.lightGreen,
          lineDash: [3, 3],
        });
      // .tooltip("name*total", (name, total) => {
      //   return {
      //     name,
      //     value: (Number(total) * 100).toFixed(0) + "%",
      //   };
      // });

      state.chart.render();
    };

    watch(
      () => store.getters.rentControl.RentRateTread,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { RentRateTread } = store.getters.rentControl;
      if (RentRateTread) {
        console.log("---------RentRateTread", toRaw(RentRateTread));
        state.data = RentRateTread;
        if (state.chart) {
          state.chart.changeData(state.data);
        } else {
          nextTick(() => {
            initChart();
          });
        }
      }
    };
    onMounted(() => {
      registerTheme("chartTheme", common.chartTheme);
      getData();
    });

    onBeforeUnmount(() => {
      const chartBox = document.getElementById(state.chartId);
      if (chartBox) {
        chartBox.innerHTML = "";
      }
    });
    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
</style>
